<template>
	<view>
		<view class="mainbgc" v-if="pageShow">

			<!-- 头部 -->
			<!-- 开始时间 -->
			<u-datetime-picker :show="shows" v-model="value1" title="开始时间" mode="date" @confirm="confirmstart"
				@cancel="shows=false"></u-datetime-picker>
			<!-- 结束时间 -->
			<u-datetime-picker :show="showss" :minDate="mindate" title="结束时间" mode="date" @confirm="confirmend"
				@cancel="showss=false"></u-datetime-picker>
			<view class="header-box">
				<view class="header">
					<view class="needposi">
						<view class="flexleft" v-if="isLogin">
							<view class="headimage">
								<image :src="userInfo.avatar_text" mode=""></image>
							</view>
							<view>
								<view class="userinfo">{{userInfo.username}}（{{userInfo.mobile}}）</view>
								<!-- <view class="gongsi">{{userInfo.company_name}}</view> -->
							</view>
						</view>
						<view class="flexleft" v-if="!isLogin">
							<view class="headimage">
								<image src="../../static/image/news/news3.png" mode=""></image>
							</view>
							<view>
								<view class="userinfo">未登录</view>
							</view>
						</view>
						<view class="flexright">
							<view class="news" style="margin-right: 30rpx; position: relative;"
								@click="jumpurl('/pages/homepage/news/news')">
								<!-- <view class="dian" v-if="readlist[0]">
									
								</view> -->
								<u-badge :offset='offset' absolute max="99" :value="readlist"></u-badge>
							</view>
							<view class="scan" @click="scanbarCode"></view>
						</view>
					</view>
				</view>
			</view>
			<view class="mainpadding2 needtop">
				<view class="ffffff radius">
					<view class="mainpadding needbotborder">
						<view class="flexbetween">
							<view class="flexleft" @click="jumpurl('/pages/homepage/tichengph')">
								<view class="titletext margin_right">总提成排行</view>
								<u-icon name="arrow-right" color="#00B855" size="20"></u-icon>
							</view>
							<view class="titletext">我的排名：<text style="color:#00B855;">{{tichengAll.rank_num}}</text></view>
							<!-- <view class="flexleft">
								<view class="downimage" style="margin: 0 15rpx;"></view>
								<view class="strongtext">1名</view>
							</view> -->
						</view>
						<!-- 筛选 -->
						<view class="flexbetween margin_top">
							<view class="flexleft">
								<view :class="currentsr==1?'select':'noselect'" style="margin-right: 15rpx;"
									@click="nianclick">年</view>
								<view :class="currentsr==2?'select':'noselect'" style="margin-right: 15rpx;"
									@click="yueclick">月</view>
								<view :class="currentsr==3?'select':'noselect'" style="margin-right: 15rpx;"
									@click="riclick">日</view>
							</view>
							<view class="flexleft selecttime_box radius" @click="selecttimes(1)">
								<view class="selecttime" style="margin-right: 20rpx;"></view>
								<view class="selecttime_text">{{starttime}}-{{endtime}}</view>
							</view>
						</view>
						<!-- 柱状图图表 -->
						<view class="charts-box2">
							<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
						</view>
					</view>
					<view class="flexbetween mainpadding">
						<view class="flexcolumn">
							<view class="strongtext" style="color: #333;">总提成</view>
							<view class="margin_top maincolor_text">{{tichengAll.total_tc_price || 0}}</view>
						</view>
						<view class="flexcolumn">
							<view class="strongtext" style="color: #333;">本月提成</view>
							<view class="margin_top maincolor_text">{{tichengAll.by_tc_price || 0}}</view>
						</view>
						<view class="flexcolumn">
							<view class="strongtext" style="color: #333;">今日提成</view>
							<view class="margin_top maincolor_text">{{tichengAll.today_tc_price || 0}}</view>
						</view>
						<view class="flexcolumn">
							<view class="strongtext" style="color: #333;">今日销售额</view>
							<view class="margin_top maincolor_text">{{tichengAll.today_saleprice || 0}}</view>
						</view>
					</view>
				</view>
				<!-- 进度条 -->
				<view class="jdt margin_top" @click="jumpurl('/pages/systempage/systempage?type=4')">
					<view class="flexbetween">
						<view class="mubiao">距活动还剩{{getcountDays()}}天</view>
						<!-- <view class="mubiao">{{new Date().getFullYear()}}年{{new Date().getMonth() + 1}}月目标收入 </view> -->

						<view class="mubiao_content flexleft">
							<view class="hongbaoimage">
								<image src="../../static/image/system/hongbao.png" mode=""></image>
							</view>
							<view>达标积分:{{userInfo.yjdb_score}}</view>
						</view>
					</view>
					<view style="margin-top: 60rpx;padding: 0 50rpx;">
						<u-line-progress :percentage="Number(userInfo.yjwc_rate)" height="26" activeColor="#1ED76D">
							<view class="jdtlable">
								<view class="lable" style="color: #1ED76D;">成长值{{Number(userInfo.yjwc_rate)}}%
									<image class="sanjiao" src="../../static/image/system/sanjiao.png" mode=""></image>
								</view>
								<view class="cicle"></view>
							</view>
						</u-line-progress>
					</view>
					<view class="jdt_bottom flexbetween">
						<view>目标奖金:<text style="color: #ff0000;">{{userInfo.yjdb_jlprice}}</text></view>
						<view>距目标:<text style="color: #1ED76D;">{{userInfo.jmb_score}}分</text></view>
					</view>
					<view class="jdt_leftimage">
						<image src="../../static/image/system/hbleft.png" mode=""></image>
					</view>
					<view class="jdt_righttimage">
						<image src="../../static/image/system/hbright.png" mode=""></image>
					</view>
				</view>
				<!-- 全部业务员 -->
				<view class="flexbetween mainpadding needbotborder"
					@click="selectRole('/pages/workbench/jiben/yuangongda?type=2')">
					<view class="flexleft">
						<view class="portrait"></view>
						<view class="titletext">{{staff_name}}</view>
					</view>
					<view class="righticon"></view>
				</view>
				<view class="flexbetween margin_top">
					<view class="flexleft">
						<view :class="datecurrentxsje==2?'select':'noselect'" style="margin-right: 15rpx;"
							@click="datecurrentxsje=2">年</view>
						<view :class="datecurrentxsje==3?'select':'noselect'" style="margin-right: 15rpx;"
							@click="datecurrentxsje=3">月</view>
						<view :class="datecurrentxsje==1?'select':'noselect'" style="margin-right: 15rpx;"
							@click="datecurrentxsje=1">日</view>
					</view>
					<view class="flexleft selecttime_box radius" @click="selecttimes(2)">
						<view class="selecttime" style="margin-right: 20rpx;"></view>
						<view class="selecttime_text">{{statrt1}}-{{end1}}</view>
					</view>
				</view>
				<view class="flexbetween mainpadding">
					<view class="titletext">销售金额:￥{{dataAll.sale_price || 0}} </view>
					<view class="flexcolumn">
					
						<view class="maincolor_text">当日排名：{{dataAll.totay_rank_num || 0}}</view>
						<view class="maincolor_text">本月排名：{{dataAll.by_rank_num || 0}}</view>
					</view>
				</view>
				<view class="huanse_bgc radius">
					<!-- 销售金额-日 -->
					<template>
						<view class="flexbetween margin_top">
							<view class="flexstart" style="flex: 1.5;">
								<view class="linewidth"></view>
								<view class="flexcolumn" style="align-items: flex-start;">
									<view class="strongtext">订货数量</view>
									<view class="margin_top strongtext">{{dataAll.sale_num || 0}}
									</view>
								</view>
							</view>
							<view class="flexstart" style="flex: 1;">
								<view class="linewidth"></view>
								<view class="flexcolumn" style="align-items: flex-start;">
									<view class="strongtext">订单笔数</view>
									<view class="margin_top strongtext">{{dataAll.sale_bs || 0}}
									</view>
								</view>
							</view>
						</view>
						<view class="flexbetween margin_top">
							<view class="flexstart" style="flex: 1.5;">
								<view class="linewidth"></view>
								<view class="flexcolumn" style="align-items: flex-start;">
									<view class="strongtext">已收金额</view>
									<view class="margin_top strongtext">{{dataAll.ys_sale_price || 0}}</view>
								</view>
							</view>
							<view class="flexstart" style="flex: 1;">
								<view class="linewidth"></view>
								<view class="flexcolumn" style="align-items: flex-start;">
									<view class="strongtext">待收金额</view>
									<view class="margin_top strongtext">{{dataAll.ds_sale_price || 0}}</view>
								</view>
							</view>
						</view>
					</template>
				</view>
				<!-- 客户统计 -->
				<view class="mainpadding flexbetween titletext">
					<text>客户统计</text>
					<view class="flexcolumn">
						<view class="maincolor_text">
							总客户:{{dataAll.total_custom_num || 0}},第{{dataAll.total_custom_rank_num || 0}}</view>
						<view class="maincolor_text">
							新增客户:{{dataAll.newadd_custom_num || 0}},第{{dataAll.new_custom_rank_num || 0}}</view>
					</view>
				</view>
				<view class="huanse_bgc radius">
					<template>
						<view class="flexbetween margin_top">
							<view class="flexstart" style="flex: 1.5;">
								<view class="linewidth"></view>
								<view class="flexcolumn" style="align-items: flex-start;">
									<view class="strongtext">新增客户</view>
									<view class="margin_top strongtext">{{dataAll.newadd_custom_num || 0}}</view>
								</view>
							</view>
							<view class="flexstart" style="flex: 1;">
								<view class="linewidth"></view>
								<view class="flexcolumn" style="align-items: flex-start;">
									<view class="strongtext">欠款客户</view>
									<view class="margin_top strongtext">{{dataAll.qk_custom_num || 0}}
									</view>
								</view>
							</view>
						</view>
						<view class="flexbetween margin_top">
							<view class="flexstart" style="flex: 1.5;">
								<view class="linewidth"></view>
								<view class="flexcolumn" style="align-items: flex-start;">
									<view class="strongtext">下单客户</view>
									<view class="margin_top strongtext">{{dataAll.xd_custom_num || 0}}</view>
								</view>
							</view>
							<view class="flexstart" style="flex: 1;">
								<view class="linewidth"></view>
								<view class="flexcolumn" style="align-items: flex-start;">
									<view class="strongtext">未下单客户</view>
									<view class="margin_top strongtext">{{dataAll.wxd_custom_num || 0}}</view>
								</view>
							</view>
						</view>
					</template>
				</view>
				<!-- 销售额分析 -->
				<view class="mainpaddin">
					<view class="flexbetween margin_top">
						<view class="flexleft">
							<view :class="currentsr2==1?'select':'noselect'" style="margin-right: 15rpx;"
								@click="nianclicks">年</view>
							<view :class="currentsr2==2?'select':'noselect'" style="margin-right: 15rpx;"
								@click="yueclicks">月</view>
							<view :class="currentsr2==3?'select':'noselect'" style="margin-right: 15rpx;"
								@click="riclicks">日</view>
						</view>
						<view class="flexleft selecttime_box radius" @click="selecttimes(3)">
							<view class="selecttime" style="margin-right: 20rpx;"></view>
							<view class="selecttime_text">{{start2}}-{{end2}}</view>
						</view>
					</view>
				</view>
				<view class="ffffff mainpadding_top">
					<view class="titletext">销售额分析</view>
					<!-- <view class="flexleft margin_top">
						<view :class="datexsecurrent==1?'select':'noselect'" style="margin-right: 15rpx;"
							@click="switchxseDate(1)">日</view>
						<view :class="datexsecurrent==2?'select':'noselect'" style="margin-right: 15rpx;"
							@click="switchxseDate(2)">周</view>
						<view :class="datexsecurrent==3?'select':'noselect'" style="margin-right: 15rpx;"
							@click="switchxseDate(3)">月</view>
					</view> -->
					<view class="flexleft">
						<view class="charts-box" style="flex: 2; height: 450rpx;">
							<qiun-data-charts type="ring" :opts="optstwo" :chartData="chartDatatwo" />
						</view>
						<view class=" flexcolumn" style="flex: 1;">
							<view class="bigtext">销售总额</view>
							<view class="maincolor_text margin_top">{{allmsg2.saleprice}}</view>
						</view>
					</view>
					<!-- <view class="flexleft" v-if="datexsecurrent==2">
						<view class="charts-box" style="flex: 2;">
							<qiun-data-charts type="ring" :opts="optstwo" :chartData="chartDatatwo" />
						</view>
						<view class=" flexcolumn" style="flex: 1.5;">
							<view class="bigtext">上周销售总额</view>
							<view class="maincolor_text margin_top">{{allmsg.sz_saleprice}}</view>
							<view class="upimage2 margin_top" v-show="allmsg.bz_saleprice>=allmsg.sz_saleprice">
							</view>
							<view class="downimage2 margin_top" v-show="allmsg.bz_saleprice<allmsg.sz_saleprice">
							</view>
							<view class="strongtext margin_top">
								<text>同比{{allmsg.bz_saleprice>=allmsg.sz_saleprice?'增长':'减少'}}</text>
								<text :class="allmsg.bz_saleprice>=allmsg.sz_saleprice?'uptext':'downtext'">{{cumput(allmsg.bz_saleprice,allmsg.sz_saleprice)}}</text>
								<text>元</text>
							</view>
						</view>
					</view> -->
					<!-- <view class="flexleft" v-if="datexsecurrent==3">
						<view class="charts-box" style="flex: 2;">
							<qiun-data-charts type="ring" :opts="optstwot" :chartData="chartDatatwot" />
						</view>
						<view class=" flexcolumn" style="flex: 1.5;">
							<view class="bigtext">上月销售总额</view>
							<view class="maincolor_text margin_top">{{allmsg.sy_saleprice}}</view>
							<view class="upimage2 margin_top" v-show="allmsg.by_saleprice>=allmsg.sy_saleprice"></view>
							<view class="downimage2 margin_top" v-show="allmsg.by_saleprice<allmsg.sy_saleprice"></view>
							<view class="strongtext margin_top">
								<text>同比{{allmsg.by_saleprice>=allmsg.sy_saleprice?'增长':'减少'}}</text>
								<text :class="allmsg.by_saleprice>=allmsg.sy_saleprice?'uptext':'downtext'">{{cumput(allmsg.by_saleprice,allmsg.sy_saleprice)}}</text>
								<text>元</text>
							</view>
						</view>
					</view> -->
				</view>
				<!-- 新增客户分析 -->
				<view class="ffffff mainpadding_top">
					<view class="titletext">新增客户分析</view>
					<!-- <view class="flexleft margin_top">
						<view :class="datexzkhcurrent==1?'select':'noselect'" style="margin-right: 15rpx;"
							@click="switchxzkhDate(1)">日</view>
							<view :class="datexzkhcurrent==2?'select':'noselect'" style="margin-right: 15rpx;"
								@click="switchxzkhDate(2)">周</view>
						<view :class="datexzkhcurrent==3?'select':'noselect'" style="margin-right: 15rpx;"
							@click="switchxzkhDate(3)">月</view>
					</view> -->
					<view class="flexleft margin_top">
						<view class="flexcenter" style="flex: 1;">
							<view class="flexcolumn ciclebgc">
								<view class="maincolor_text">{{allmsg2.custom}}</view>
								<view class="nostrongtext margin_top">新增客户</view>
							</view>
						</view>
						<view class=" flexcolumn" style="flex: 1;">
							<view class="bigtext">新增客户</view>
							<view class="maincolor_text margin_top">{{allmsg2.custom}}</view>
						</view>
					</view>
					<!-- <view class="flexleft margin_top" v-if="datexzkhcurrent==2">
						<view class="flexcenter" style="flex: 1;">
							<view class="flexcolumn ciclebgc">
								<view class="maincolor_text">{{allmsg2.bz_custom_num}}</view>
								<view class="nostrongtext margin_top">本周新增客户</view>
							</view>
						</view>
						<view class=" flexcolumn" style="flex: 1;">
							<view class="bigtext">上周新增客户</view>
							<view class="maincolor_text margin_top">{{allmsg2.sz_custom_num}}</view>
							<view class="upimage2 margin_top" v-show="allmsg2.bz_custom_num>=allmsg2.sz_custom_num">
							</view>
							<view class="downimage2 margin_top" v-show="allmsg2.bz_custom_num<allmsg2.sz_custom_num">
							</view>
							<view class="strongtext margin_top">
								<text>同比{{Number(allmsg2.bz_custom_num)>=Number(allmsg2.sz_custom_num)?'增长':'减少'}}</text>
								<text :class="Number(allmsg2.bz_custom_num)>=Number(allmsg2.sz_custom_num)?'uptext':'downtext'">{{cumput(allmsg2.bz_custom_num,allmsg2.sz_custom_num)}}</text>
								<text>人</text>
							</view>
						</view>
					</view> -->
					<!-- <view class="flexleft margin_top" v-if="datexzkhcurrent==3">
						<view class="flexcenter" style="flex: 1;">
							<view class="flexcolumn ciclebgc">
								<view class="maincolor_text">{{allmsg2.by_custom_num}}</view>
								<view class="nostrongtext margin_top">本月新增客户</view>
							</view>
						</view>
						<view class=" flexcolumn" style="flex: 1;">
							<view class="bigtext">上月新增客户</view>
							<view class="maincolor_text margin_top">{{allmsg2.sy_custom_num}}</view>
							<view class="upimage2 margin_top" v-show="allmsg2.by_custom_num>=allmsg2.sy_custom_num">
							</view>
							<view class="downimage2 margin_top" v-show="allmsg2.by_custom_num<allmsg2.sy_custom_num">
							</view>
							<view class="strongtext margin_top">
								<text>同比{{Number(allmsg2.by_custom_num)>=Number(allmsg2.sy_custom_num)?'增长':'减少'}}</text>
								<text :class="Number(allmsg2.by_custom_num)>=Number(allmsg2.sy_custom_num)?'uptext':'downtext'">{{cumput(allmsg2.by_custom_num,allmsg2.sy_custom_num)}}</text>
								<text>人</text>
							</view>
						</view>
					</view> -->
				</view>
				<!-- 客户拜访分析 -->
				<!-- <view class="ffffff mainpadding_top">
					<view class="titletext">客户拜访分析</view>
					<view class="flexleft margin_top ffffff radius">
						<view class="charts-box8" style="flex: 2;">
							<qiun-data-charts type="ring" :opts="optsfour" :chartData="chartDatafour" />
						</view>
						<view class=" flexcolumn" style="flex: 1.5;">
							<view class="titletext">客户总数:{{allmsg3.custom_num}}个</view>
							<view class="flexstart margin_top">
								<view class="baifang"></view>
								<view class="ringtcontent">
									<view class="allnum">拜访客户数</view>
									<view class="strongtext flexleft">
										<view class="margin_right">{{allmsg3.today_visit_num}}</view>
										<view>{{allmsg3.today_visit_rate}}%</view>
									</view>
								</view>
							</view>
							<view class="flexstart margin_top">
								<view class="nobaifang"></view>
								<view class="ringtcontent">
									<view class="allnum">未拜访客户数</view>
									<view class="strongtext flexleft">
										<view class="margin_right">{{allmsg3.today_no_visit_num}}
										</view>
										<view>{{allmsg3.today_no_visit_rate}}%</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view> -->
				<!-- 客户拜访排行 -->
				<view class="ffffff mainpadding_top">
					<view class="titletext">客户拜访排行</view>
					<view class="charts-box2">
						<qiun-data-charts type="column" :opts="opts" :chartData="chartDatafive" />
					</view>
				</view>

			</view>
		</view>
		<!-- #ifdef APP-PLUS || H5 -->
		<zy-update theme="blue"  :appstoreflag="true" :autocheckupdate="true" :updateurl="updateurl">
		</zy-update>
		<!-- #endif -->
		<tabbar current=0></tabbar>
	</view>
</template>


<script>
	const httpRequest = require("@/common/httpRequest.js")
	// #ifdef APP-PLUS  || H5
	import ZyUpdate from '../../components/zy-upgrade/zy-upgrade.vue'
	// #endif
	export default {
		// #ifdef APP-PLUS  || H5
		components: {
			ZyUpdate
		},
		// #endif
		data() {
			return {
				updateurl:'https://app.gzxbyjs.com/dhtapi/Version/getDownloadUrl',
				offset: [-10, -10],
				userInfo: {},
				// 员工收入开始时间
				currentsr: 2,
				currentsr2: 2,
				shows: false,
				showss: false,
				value1: Number(new Date()),
				mindate: Number(new Date()), //最小时间
				maxdate: Number(new Date()),
				starttime: "",
				endtime: "",
				// 销售额分析
				allmsg: {},
				// 新增客户分析
				allmsg2: {},
				// 客户拜访分析
				allmsg3: {},
				// 销量走势分析
				datecurrent: 1,
				datexsecurrent: 1,
				datexzkhcurrent: 1,
				datetext: "今日",
				page: 1,
				limit: 7,
				list: {
					data: [{
						date: "", //日期时间
						sales: "", //销售
						refund: "", //退款
						net_sales: "" //销售净额
					}]
				},
				alldata: {
					sales: "", //销售
					refund: "", //退款
					net_sales: "" //销售净额
				},
				chartData: {},
				tichengAll: {},
				chartDatatwo: {},
				chartDatatwot: {},
				chartDatathree: {},
				// 环形图
				chartDatafour: {},
				chartDatafive: {},
				datecurrentxsje: 3,
				statrt1: this.benyue(),
				end1: this.riqi(0),
				start2: this.benyue(),
				end2: this.riqi(0),
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					dataLabel: true, //是否显示图表区域顶部的总数据
					color: ["#0bbdcb", "#99C1FF", "#2C5FAE", "#99C1FF", "#2C5FAE", "#99C1FF", "#2C5FAE", "#99C1FF",
						"#2C5FAE"
					],
					padding: [30, 10, 5, 10],
					legend: { //图例配置
						show: false, //是否显示图例配置
						fontColor: "#fff", //字体颜色
						position: "top",
						float: "right",
					},
					xAxis: { //x轴
						axisLine: false, //x轴坐标轴线是否绘制
						disableGrid: true, //true不显示横线线，false显示横线
						fontColor: "#333", //文字颜色
						rotateLabel: true, //文字旋转
						rotateAngle: 40, //旋转角度
						format: 'Xdemo'
					},
					yAxis: { //y轴
						disabled: true, //是否绘制y轴
						disableGrid: false, //true不显示横线线，false显示横线
						gridType: "dash", //横线类型
						dashLength: 16, //当为虚线时虚线的长度
						data: [{
							min: 0, //起始值
							fontColor: "#999",
							axisLine: false, //y轴坐标轴线是否绘制
						}],
					},
					extra: {
						column: {
							type: "group",
							width: 30, //每个柱状得宽度
							activeBgColor: "#fff",
							activeBgOpacity: 0.08,
							barBorderCircle: false, //顶部是否为圆角
							barBorderRadius: [5, 5, 5, 5], //自定义4个圆角半径[左上,右上,右下,左下]（请关闭上面按钮（需要将barBorderCircle设为false））
						}
					}
				},
				// 环形图
				optstwo: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [0, 0, 0, 0],
					dataLabel: true,
					legend: { //图例配置
						show: false, //是否显示图例配置
						fontColor: "#fff", //字体颜色
						position: "top",
						float: "right",
					},
					title: {
						name: "",
						fontSize: 10,
						color: "#0BBDCB"
					},
					subtitle: {
						name: "销售净额",
						fontSize: 8,
						color: "#333"
					},
					extra: {
						ring: {
							labelWidth: 1,
							ringWidth: 15,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							linearType: "custom"
						}
					}
				},
				optstwot: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [0, 0, 0, 0],
					dataLabel: true,
					legend: { //图例配置
						show: false, //是否显示图例配置
						fontColor: "#fff", //字体颜色
						position: "top",
						float: "right",
					},
					title: {
						name: "",
						fontSize: 10,
						color: "#0BBDCB"
					},
					subtitle: {
						name: "本月销售净额",
						fontSize: 8,
						color: "#333"
					},
					extra: {
						ring: {
							labelWidth: 1,
							ringWidth: 15,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							linearType: "custom"
						}
					}
				},

				optsfour: {
					rotate: false,
					rotateLock: false,
					color: ["#F3AD3D", "#13BFCC", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [0, 0, 0, 0],
					dataLabel: true,
					legend: { //图例配置
						show: false, //是否显示图例配置
						fontColor: "#fff", //字体颜色
						position: "top",
						float: "right",
					},
					title: {
						name: '0',
						fontSize: 15,
						color: "#0BBDCB"
					},
					subtitle: {
						name: "今日拜访率",
						fontSize: 10,
						color: "#333"
					},
					extra: {
						ring: {
							labelWidth: 1,
							ringWidth: 15,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							linearType: "custom"
						}
					}
				},
				userlist: {
					user_info: {
						avatar: "",
						name: "",
						phone: ""
					},
					company_info: {
						company_name: ""
					}
				},
				dataAll: {},
				isLogin: false,
				readlist: "",
				staff_id: "",
				staff_name: "",
				pageShow: false,
				selecttimeCur: 1, //1选择提成日期，2选择销售额客户日期
			}
		},
		onLoad() {
			this.isLogin = httpRequest.checkIsLogin()
			uni.hideTabBar(); //隐藏tab
			// 未登录
			if (!this.isLogin) {
				return
			}
			this.getInfo()
			this.starttime = this.benyue()
			this.endtime = this.riqi(0);
			this.getServerDatafive()
		},
		onPullDownRefresh() {
			this.getServerData(2)
			this.getInfo()
			this.getServerDatafive()
		},
		onShow() {
			let that = this
			uni.$off('ygSelectFn');
			uni.$on('ygSelectFn', (data) => {
				that.staff_id = data.id
				that.staff_name = data.name
				this.getmsg()
				this.getServerDatatwo(); //销售额分析
				// this.getxzkh() //新增客户分析
				this.getServerDatafour() //客户拜访分析
			})
			this.getreadnews()
		},
		watch: {
			starttime(newval) {
				this.getServerData()
			},
			endtime(newval) {
				this.getServerData()
			},
			start2(newval) {
				this.getServerDatafive()
			},
			end2(newval) {
				this.getServerDatafive()
			},
			datecurrentxsje(newval) {
				if (this.datecurrentxsje == 1) {
					this.end1 = this.riqi(0)
					this.statrt1 = this.riqi(0)
				} else if (this.datecurrentxsje == 2) {
					this.statrt1 = this.jinnian()
					this.end1 = this.riqi(0)
				} else {
					this.statrt1 = this.benyue()
					this.end1 = this.riqi(0)
				}
				this.getmsg()
			},
		},
		methods: {
			scanbarCode() {
				// 允许从相机和相册扫码
				uni.scanCode({
					success: function(res) {
						console.log('正确信息：' + res);
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						uni.navigateTo({
							url: "/pages/workbench/jiben/shangpinda?keyword=" + res.result
						})
					},
					fail(err) {
						console.log('错误信息：' + err);
					}
				});
			},
			getcountDays() {
				var today = new Date();
				var now = today.getDate();
				var year = today.getYear();
				if (year < 2000) year += 1900; // Y2K fix
				var month = today.getMonth();
				var monarr = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
				// check for leap year
				if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monarr[1] = "29";
				// display day left
				// document.write("这个月还剩 " +  + " 天了");
				return (monarr[month] - now)
			},
			selecttimes(val) {
				this.selecttimeCur = val
				this.shows = true
			},
			selectRole(url) {
				uni.navigateTo({
					url
				})
			},
			getInfo() {
				httpRequest.request('/dhtapi/user/index', 'POST', {}).then(res => {
					this.$store.state.userInfo = res.data
					this.userInfo = res.data
					this.staff_id = res.data.id
					this.staff_name = res.data.username
					this.getmsg()
					// this.getServerDatatwo(); //销售额分析
					// this.getxzkh() //新增客户分析
					// this.getServerDatafour() //客户拜访分析
					this.pageShow = true
				}).catch(err => {
					httpRequest.toast(err.msg)
				})
			},
			cumput(v1, v2) {
				let num1 = Number(v1)
				let num2 = Number(v2)
				return Math.abs(num1 - num2)
			},
			// 首页数据
			getmsg() {
				httpRequest.request('/dhtapi/index/indexDataSale', 'POST', {
					staff_id: this.staff_id,
					start_time: this.statrt1,
					end_time: this.end1
				}).then(res => {
					this.dataAll = res.data
				}).catch(err => {
					httpRequest.toast(err.msg)
				})
			},
			// 昨天“-1”今天“0”明天“1”
			riqi(day) {
				let dd = new Date();
				dd.setDate(dd.getDate() + day);
				let y = dd.getFullYear();
				let m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
				let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
				return y + "-" + m + "-" + d;
			},
			// 本月第一天
			benyue() {
				let y = new Date().getFullYear(); //获取年份
				let m = new Date().getMonth() + 1; //获取月份
				let d = '01'
				m = m < 10 ? '0' + m : m; //月份补 0
				return [y, m, d].join("-")
			},
			getreadnews() {
				// 未登录
				if (!this.isLogin) {
					return
				}
				httpRequest.request('/dhtapi/index/newsNoReadNum', 'POST', {}).then(res => {
					if (res.code == 1) {
						this.readlist = res.data.total_noread_num
					} else {
						httpRequest.toast(res.msg)
					}
				}).catch(err => {
					httpRequest.toast(err.msg)
				})
			},
			// 收入排行开始时间确定
			confirmstart(e) {
				this.mindate = e.value
				this.shows = false
				this.showss = true
				console.log(this.selecttimeCur, "jingl;");
				if (this.selecttimeCur == 1) {
					// this.starttime = this.getFirst(e.value)
					this.starttime = httpRequest.returnDate(e.value)
				} else if (this.selecttimeCur == 2) {
					// this.statrt1 = this.getFirst(e.value)
					this.statrt1 = httpRequest.returnDate(e.value)
				} else if (this.selecttimeCur == 3) {
					// this.statrt1 = this.getFirst(e.value)
					this.start2 = httpRequest.returnDate(e.value)
				}
				// console.log(this.starttime, "开始时间确定")
			},
			confirmend(e) {
				this.showss = false
				if (this.selecttimeCur == 1) {
					// this.endtime = this.getLast(e.value)
					this.endtime = httpRequest.returnDate(e.value)
				} else if (this.selecttimeCur == 2) {
					// this.end1 = this.getFirst(e.value)
					this.end1 = httpRequest.returnDate(e.value)
				} else if (this.selecttimeCur == 3) {
					this.end2 = httpRequest.returnDate(e.value)
				}
				// console.log(this.endtime,"结束时间")
			},
			// 获取当前月的第一天和最后一天
			getFirst(time) {
				let date = new Date(time);
				date.setDate(1);
				let cTime = new Date(new Date(date).toLocaleDateString()).getTime();
				//将时间戳转换成时间格式
				let date1 = new Date(cTime);
				let year = date1.getFullYear();
				let month = date1.getMonth() + 1;
				let day = date1.getDate();
				month = month < 10 ? "0" + month : month;
				day = day < 10 ? "0" + day : day;
				let ddate = year + '-' + month + '-' + day;
				return ddate;
			},
			getLast(time) {
				let date = new Date(time);
				let new_month = date.getMonth() + 1;
				//取当前的年份
				let new_year = date.getFullYear();
				//取当年当月中的第一天
				let new_date = new Date(new_year, new_month, 1);
				let currentdate =
					`${new_year}-${new_month}-${new Date(new_date.getTime() - 1000 * 60 * 60 * 24).getDate()}`;
				return currentdate;
			},
			nianclick() {
				this.currentsr = 1
				this.starttime = this.jinnian()
				this.endtime = this.riqi(0);
			},
			yueclick() {
				// 获取本月第一天和今天
				this.currentsr = 2
				this.starttime = this.benyue();
				this.endtime = this.riqi(0);
			},
			riclick() {
				// 获取今天
				this.currentsr = 3
				this.starttime = this.riqi(0);
				this.endtime = this.riqi(0);
			},
			nianclicks() {
				this.currentsr2 = 1
				this.start2 = this.jinnian()
				this.end2 = this.riqi(0);
			},
			yueclicks() {
				// 获取本月第一天和今天
				this.currentsr2 = 2
				this.start2 = this.benyue();
				this.end2 = this.riqi(0);
			},
			riclicks() {
				// 获取今天
				this.currentsr2 = 3
				this.start2 = this.riqi(0);
				this.end2 = this.riqi(0);
			},

			// 昨天“-1”今天“0”明天“1”
			riqi(day) {
				let dd = new Date();
				dd.setDate(dd.getDate() + day);
				let y = dd.getFullYear();
				let m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
				let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
				return y + "-" + m + "-" + d;
			},
			// 本月第一天
			benyue() {
				let y = new Date().getFullYear(); //获取年份
				let m = new Date().getMonth() + 1; //获取月份
				let d = '01'
				m = m < 10 ? '0' + m : m; //月份补 0
				return [y, m, d].join("-")
			},
			// 今年第一天
			jinnian() {
				let date1 = new Date();
				let year1 = date1.getFullYear();
				let firstMonth = year1 + '-' + '01' + '-' + '01';
				return firstMonth
			},
			switchDate(value) {
				this.datecurrent = value
				if (value == 1) {
					this.datetext = '今日'
				} else if (value == 2) {
					this.datetext = '这周'
				} else {
					this.datetext = '本月'
				}
				this.init()
			},
			switchxseDate(value) {
				this.datexsecurrent = value
			},
			switchxzkhDate(value) {
				this.datexzkhcurrent = value
			},
			RetnWF2() { //JS判断的if elseif方法
				let wstr = "";
				let date = new Date();
				let day = date.getDay();
				if (day == 0) {
					wstr = "周日";
				} else if (day == 1) {
					wstr = "周一";
				} else if (day == 2) {
					wstr = "周二";
				} else if (day == 3) {
					wstr = "周三";
				} else if (day == 4) {
					wstr = "周四";
				} else if (day == 5) {
					wstr = "周五";
				} else if (day == 6) {
					wstr = "周六";
				}
				return wstr;
			},
			// 新增客户分析
			// getxzkh() {
			// 	httpRequest.request('/dhtapi/custom/newCustomFx', 'POST', {
			// 		staff_id: this.staff_id
			// 	}).then(res => {
			// 		this.allmsg2 = res.data
			// 	})
			// },
			getData() {
				httpRequest.request('manage/index/index', 'POST', {

				}).then(res => {
					console.log(res)
				})
			},
			jumpurl(url) {
				uni.navigateTo({
					url: url
				})

			},
			// 图表
			getServerData(val) {
				let _this = this;
				httpRequest.request('/dhtapi/index/indexDataStaffPh', 'POST', {
					start_time: this.starttime, //开始日期
					end_time: this.endtime, //结束日期
					page: 1,
					limit: 12
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let msg = {
							categories: [],
							series: [{
								name: "",
								data: []
							}]
						}
						let arr = resList.stafftcrang.data.slice(0, 7)
						arr.forEach(item => {
							msg.categories.push(item.username)
							msg.series[0].data.push({
								value: item.staffcommissionlog_sum || 0
							})
						})
						_this.chartData = JSON.parse(JSON.stringify(msg));
						this.tichengAll = resList
					}
					uni.stopPullDownRefresh()
					if(val==2){
						httpRequest.toast("刷新成功")
					}
				})
			},
			// 客户拜访排行
			getServerDatafive() {
				let _this = this;
				httpRequest.request('/dhtapi/index/saleDataIndex', 'POST', {
					staff_id: this.staff_id,
					start_time: this.start2, //开始日期
					end_time: this.end2 //结束日期
				}, false, false, true).then(res => {

					if (res.code == 1) {
						let resList = res.data;
						// 客户拜访排行
						let msg = {
							categories: [],
							series: [{
								name: "",
								data: []
							}]
						}
						let arr = resList.staffData.slice(0, 7)
						arr.forEach(item => {
							msg.categories.push(item.username)
							msg.series[0].data.push({
								value: item.visit_num
							})
						})
						_this.chartDatafive = JSON.parse(JSON.stringify(msg));
						// 销售额分析
						let msg2 = {
							series: [{
								data: [{
									name: "销售额",
									value: 0,
									labelShow: true
								}, {
									name: "退款金额",
									value: 0,
									labelShow: true
								}, {
									name: "销售净额",
									value: 0,
									labelShow: true
								}, ]
							}]
						};
						let num1 = Number(res.data.saleprice)
						let num2 = Number(res.data.salethprice)
						let num3 = Number(res.data.salejeprice)
						msg2.series[0].data[0].value = num1
						msg2.series[0].data[1].value = num2
						msg2.series[0].data[2].value = num3
						this.optstwo.title.name = res.data.salejeprice.toString()
						this.chartDatatwo = JSON.parse(JSON.stringify(msg2));
						this.allmsg2 = res.data
					}

				})
			},
			// 环形图销售额分析
			getServerDatatwo() {
				httpRequest.request('/dhtapi/goods/salePriceRang', 'POST', {
					staff_id: "", //品牌
					category_id: "", //类别
					goods_id: "", //商品
				}).then(res => {
					this.allmsg = res.data
					let msg = {
						series: [{
							data: [{
								name: "今日销售净额",
								value: 0,
								labelShow: false
							}, {
								name: "上周今日销售净额",
								value: 10,
								labelShow: false
							}, ]
						}]
					};
					let num1 = Number(this.allmsg.today_saleprice)
					let num2 = Number(this.allmsg.prev_saleprice)
					msg.series[0].data[0].value = num1
					msg.series[0].data[1].value = num2
					this.optstwo.title.name = this.allmsg.today_xc_price.toString()
					this.chartDatatwo = JSON.parse(JSON.stringify(msg));
					let msgt = {
						series: [{
							data: [{
								name: "本月销售净额",
								value: 0,
								labelShow: false
							}, {
								name: "上月销售净额",
								value: 10,
								labelShow: false
							}, ]
						}]
					};
					let numt1 = Number(this.allmsg.by_saleprice)
					let numt2 = Number(this.allmsg.sy_saleprice)
					msgt.series[0].data[0].value = numt1
					msgt.series[0].data[1].value = numt2
					this.optstwot.title.name = this.allmsg.by_xc_price
					this.chartDatatwot = JSON.parse(JSON.stringify(msgt));
				})
			},
			// 柱状图2
			getServerDatathree() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["张三", "莉丝", "王云", "李建林", "司马浩宇", "张浩", "贾培培"],
						series: [{
							name: "",
							data: [{
									color: "rgba(11, 189, 203, 1)",
									value: "5"
								}, {
									color: "rgba(11, 189, 203, 0.6)",
									value: "19675"
								},
								{
									color: "rgba(11, 189, 203, 0.6)",
									value: "11563"
								},
								{
									color: "rgba(11, 189, 203, 0.6)",
									value: "42789"
								},
								{
									color: "rgba(11, 189, 203, 0.6)",
									value: "5234"
								},
								{
									color: "rgba(11, 189, 203, 0.6)",
									value: "42789"
								},
								{
									color: "rgba(11, 189, 203, 0.6)",
									value: "5234"
								}
							]
						}, ]
					};
					this.chartDatathree = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			// 环形图客户拜访分析
			getServerDatafour() {
				httpRequest.request('/dhtapi/custom/customVisitFx', 'POST', {
					staff_id: this.staff_id,
				}).then(res => {
					this.allmsg3 = res.data
					let msg = {
						series: [{
							data: [{
									"name": "拜访客户数",
									"value": 0,
									"labelShow": false
								},
								{
									"name": "未拜访客户数",
									"value": 0,
									"labelShow": false //是否展示角标
								}
							]
						}]
					};
					msg.series[0].data[0].value = this.allmsg3.today_visit_num
					msg.series[0].data[1].value = this.allmsg3.custom_num - this.allmsg3.today_visit_num
					this.optsfour.title.name = this.allmsg3.today_visit_rate + "%"
					this.chartDatafour = JSON.parse(JSON.stringify(msg));
				})
			},
		},
	}
</script>
<style lang="scss" scoped>
	// 客户拜访分析
	.charts-box8 {
		width: 50%;
		height: 300rpx;
	}

	// 图标右边内容
	.maincolor_text {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #0BBDCB;
	}

	.baifang {
		margin-right: 15rpx;
		width: 24rpx;
		height: 24rpx;
		border-radius: 10rpx;
		background-color: #F3AD3D;
	}

	.nobaifang {
		margin-right: 15rpx;
		width: 24rpx;
		height: 24rpx;
		border-radius: 10rpx;
		background-color: #13BFCC;
	}

	.allnum {
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 20rpx;
		margin-bottom: 15rpx;
	}

	.ringtcontent {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-direction: column;
	}

	// 区域图
	.charts-box6 {
		width: 100%;
		height: 350rpx;
	}

	// 销售额分析
	.uptext {
		color: #00b855;
	}

	.downtext {
		color: #fb6363;
	}

	// 新增客户分析
	.ciclebgc {
		width: 220rpx;
		height: 220rpx;
		background-image: url("@/static/image/system/cicle.png");
		background-size: 100% 100%;
		padding: 30rpx;
	}

	.nostrongtext {
		font-size: 24rpx;
	}
</style>
<style lang="scss" scoped>
	// 第二个图表柱状图
	.charts-box2 {
		width: 100%;
		height: 450rpx;
	}

	.charts-box {
		width: 50%;
		height: 300rpx;
	}

	.header-box {
		height: 350rpx;
		width: 100%;
	}

	.header {
		/* #ifdef APP-PLUS */
		background-image: url("@/static/image/system/homepagebgc.png");
		/* #endif */
		/* #ifdef MP-WEIXIN */
		background-color: #0BBDCB;
		/* #endif */
		width: 100%;
		height: 376rpx;
		background-size: 100% 100%;
	}

	.needposi {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		width: 100%;
		position: fixed;
		box-sizing: border-box;
		top: 0;
		padding: 100rpx 30rpx 10rpx 30rpx;
		left: 0;
		z-index: 100;
		background-color: #0BBDCB;
	}

	.needtop {
		position: relative;
		bottom: 130rpx;
	}

	.needbotborder {
		border-bottom: 1rpx solid #e9e9e9;
	}

	.headimage {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 15rpx;

		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}

	.userinfo {
		font-size: 36rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}

	.gongsi {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.select {
		padding: 15rpx 20rpx;
		border-radius: 20rpx;
		border: 1rpx solid #0BBDCB;
		background-color: #0BBDCB;
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #fff;
	}

	.noselect {
		padding: 15rpx 20rpx;
		border-radius: 20rpx;
		border: 1rpx solid #999999;
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #999999;
	}

	.maincolor_text {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #0BBDCB;
	}

	// 进度条
	.jdt {
		background-color: #FFAE2A;
		border-radius: 20rpx;
		padding: 20rpx 30rpx;
		position: relative;

	}

	.mubiao {
		font-size: 30rpx;
		font-family: DFKai-SB;
		font-weight: 800;
		color: #FFFFFF;
	}

	.mubiao_content {
		font-size: 24rpx;
		font-family: DFKai-SB;
		font-weight: 800;
		color: #F45610;
	}

	.hongbaoimage {
		width: 21rpx;
		height: 27rpx;
		margin-right: 10rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.jdt_leftimage {
		position: absolute;
		bottom: -5rpx;
		left: -5rpx;
		width: 154rpx;
		height: 83rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.jdt_righttimage {
		position: absolute;
		bottom: -5rpx;
		right: 0;
		width: 99rpx;
		height: 62rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.jdtlable {
		position: relative;

		.cicle {
			position: relative;
			right: 10rpx;
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background-color: #fff;
		}

		.lable {
			white-space: nowrap;
			position: absolute;
			right: 80%;
			transform: translate(50%, 0%);
			bottom: 40rpx;
			font-size: 28rpx;
			padding: 10rpx;
			font-family: HYZongYiJ;
			color: #FF5001;
			background-color: #fff;
			border-radius: 10rpx;

			.sanjiao {
				position: absolute;
				width: 30rpx;
				height: 10rpx;
				bottom: 0rpx;
				right: 50%;
				transform: translate(50%, 50%);
			}
		}
	}

	.jdt_bottom {
		padding: 0 100rpx;
		margin-top: 20rpx;
		font-size: 30rpx;
		font-family: HYZongYiJ;
		font-weight: 800;
		color: #FFFFFF;
	}

	.u-line-progress {
		overflow: visible;
	}

	// 全部业务员
	.portrait {
		width: 32rpx;
		height: 32rpx;
		background-image: url("@/static/image/system/headimage.png");
		background-size: 100% 100%;
		margin-right: 20rpx;
	}

	.huanse_bgc {
		background-color: #F6F7FB;
		padding: 30rpx 50rpx;
	}

	.linewidth {
		width: 12rpx;
		height: 28rpx;
		background-color: #0BBDCB;
		margin-right: 30rpx;
	}

	.dian {
		position: absolute;
		top: -5rpx;
		right: 0;
		// width: 15rpx;
		// height: 15rpx;
		// background-color: #ff0000;
		// border-radius: 50%;
	}
</style>